<template>
  <ActionTable :showBack="false" :showAdd="false">
    <div class="screen-box">
      <a-form ref="screenFormRef" layout="inline" :model="screenData">
        <a-form-item name="realName">
          <a-input v-model:value="screenData.realName" placeholder="姓名" />
        </a-form-item>
        <a-form-item name="idCard">
          <a-input v-model:value="screenData.idCard" placeholder="证件号" />
        </a-form-item>
        <a-form-item name="phone">
          <a-input v-model:value="screenData.phone" placeholder="电话" />
        </a-form-item>
        <a-form-item name="stk">
          <a-input v-model:value="screenData.stk" placeholder="神通卡号" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="screenHandleSubmit" html-type="submit"
            >搜索</a-button
          >
        </a-form-item>
        <a-form-item>
          <a-button @click="resetScreenForm">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
  </ActionTable>
  <a-table
    :columns="columns"
    :row-key="(record) => record.id"
    :data-source="state.userOfData"
    :pagination="state.pagination"
    :loading="state.loading"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableRowAction
          :selText="'查看详情'"
          :showEdit="false"
          :showDel="false"
          @subItem="showModal(record)"
        >
          <a-button
            class="btn-contacts"
            type="primary"
            @click="routerContacts(record.thirdUniqueAccount)"
            >常用联系人</a-button
          >
          <a-button class="btn-contacts" type="primary" @click="showAddress(record.id)"
            >收货地址</a-button
          >
        </TableRowAction>
      </template>
    </template>
  </a-table>
  <contextHolder />
</template>
<script lang="ts" setup>
import { TableProps, Modal } from "ant-design-vue";
import { h, onMounted, reactive, ref } from "vue";
import { paginationToQuery, proxyFilterEmptyValues } from "@/utils/common";
import { router } from "@/router";
import { selectAllPerson, selectPersonByExample } from "@/api/user/person";
import PersonDetailForm from "./person-detail.vue";
import AddressSchemas from "./addressSchemas.vue";
const [modal, contextHolder] = Modal.useModal();
const childRef = ref();
const screenFormRef = ref();
const columns = [
  {
    dataIndex: "id",
    title: "ID",
    key: "id",
    align: "center",
  },
  {
    dataIndex: "realName",
    title: "姓名",
    key: "realName",
    align: "center",
  },
  {
    dataIndex: "idCard",
    title: "证件号",
    key: "idCard",
    align: "center",
  },
  {
    dataIndex: "phone",
    title: "电话",
    key: "phone",
    align: "center",
  },
  {
    dataIndex: "createTime",
    title: "注册时间",
    key: "createTime",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
  },
];
const state = reactive({
  loading: true,
  userOfData: <API.ListItem>[],
  pagination: {
    pageSize: 10,
    current: 1,
    total: 0,
    showTotal: (total: number) => `总${total}条`,
  },
});

const screenData = reactive<API.UserItem>({
  realName: "",
  idCard: "",
  phone: "",
  stk: "",
});

/**
 * 获取数据
 */
const loadData = async () => {
  state.loading = true;
  const { seachList, seachTotal } = await selectAllPerson(
    paginationToQuery(state.pagination)
  );
  state.userOfData = seachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

/**
 * 切换分页
 * @param page
 */
const handleTableChange: TableProps["onChange"] = (page) => {
  state.pagination.current = page.current!;
  loadData();
};

/**
 * 跳转常用联系人
 * @param thirdUniqueAccount
 */
const routerContacts = (thirdUniqueAccount: string) => {
  router.push({ name: "user-person-contacts", params: { thirdUniqueAccount } });
};

const showAddress = async (userId: number) => {
  console.log("🚀 ~ file: person.vue:147 ~ showAddress ~ userId:", userId);
  const addressList: API.AddressItem[] = [
    {
      id: 1,
      userId: 4875,
      cardNo: "9513000110732386",
      realName: "张三",
      phoneNum: "13800138011",
      province: "北京",
      city: "北京",
      area: "通州",
      address: "台湖镇",
      defaultAddress: 0,
    },
    {
      id: 2,
      userId: 4875,
      cardNo: "9513000110732386",
      realName: "李四",
      phoneNum: "13800138011",
      province: "北京",
      city: "北京",
      area: "通州",
      address: "台湖镇",
      defaultAddress: 1,
    },
    {
      id: 3,
      userId: 4875,
      cardNo: "9513000110732386",
      realName: "王五",
      phoneNum: "13800138011",
      province: "北京",
      city: "北京",
      area: "通州",
      address: "台湖镇",
      defaultAddress: 1,
    },
  ];
  const addressSlot = () => h(AddressSchemas, { ref: childRef, addressList });
  modal.confirm({
    title: "收货地址",
    icon: null,
    footer: null,
    width: 700,
    closable: true,
    content: addressSlot,
  });
};

/**
 * 创建弹窗
 * @param type
 * @param data
 */
const showModal = (data?: any) => {
  const personDetailSlot = () => h(PersonDetailForm, { ref: childRef, personItem: data });
  modal.confirm({
    title: "用户信息",
    footer: null,
    icon: null,
    width: 950,
    closable: true,
    content: personDetailSlot,
  });
};

/**
 * 筛选
 */
const screenHandleSubmit = async () => {
  state.loading = true;
  const { seachList, seachTotal } = await selectPersonByExample(
    proxyFilterEmptyValues(screenData),
    { pageNum: 1, pageSize: 999 }
  );
  state.userOfData = seachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

/**
 * 重置筛选表单
 */
const resetScreenForm = () => {
  screenFormRef.value.resetFields();
};

onMounted(() => {
  loadData();
});
</script>
